// 配置路由相关的信息
// 1.导入路由
import VueRouter from "vue-router"
import Vue from "vue"

// import Home from "../components/Home"
// import About from "../components/About"
// import User from "../components/User"

// 懒加载方式
const Home = () =>import("../components/Home")
const HomeNews = ()=>import("../components/HomeNews")
const HomeMessage = ()=>import("../components/HomeMessage")
const About = () =>import("../components/About")
const User = () =>import("../components/User")
const Profile = ()=>import("../components/Profile")

// 2.使用路由
// 2.1 通过Vue.use(插件)，安装插件
Vue.use(VueRouter)
// 2.2 创建VueRouter对象
const routes = [
    // 配置映射关系
    {
        path:'/',
        // redirect  重定向
        redirect:'/home',
    },
    {
        path:'/home',
        component:Home,
        meta:{
            title:'首页'
        },
        children:[
            // {
            //     path:'',
            //     redirect:'news',
            // },
            {
                path:'news',
                component:HomeNews,
            },
            {
                path:'message',
                component:HomeMessage,
            }
        ]
        // 懒加载
        // component:() =>import('../components/Home')
    },
    {
        path:'/about',
        component:About,
        meta:{
            title:'关于'
        }, 
        // 路由独享守卫
        beforeEnter: (to,from,next) => {
            console.log("=======");
            next();
        }
    },
    // 动态路由
    {
        path:'/user/:userId',
        component:User,
        // meta  元数据(描述数据的数据)
        meta:{
            title:'用户'
        },
    },
    {
        path:'/profile',
        component:Profile,
        meta:{
            title:'档案'
        },
    },
]
const router = new VueRouter({
    // 配置路由和组件之间的应用关系
    routes,
    mode:'history',
    // 处于活跃状态就添加这个active属性
    linkActiveClass:'active'
})

// 导航守卫  前置钩子（hook） 前置守卫(guard)
router.beforeEach((to,from,next) => {
    // 从from跳转到to  从一个路由跳转到另一个路由
    document.title = to.matched[0].meta.title
    console.log(to);
    console.log("++++++++");
    // 切记，要调用next()方法
    next()
})

// 后置钩子(hook)
router.afterEach((to,from) => {
    console.log("------");
})

// 3.将router对象传入的到Vue实例
export default router



